import { Drawer, Tab } from '@alifd/next';
import { t } from '@lingui/macro';
import React from 'react';
import OrderInfo from './OrderInfo';
import OrderLogs from './OrderLogs';

const OrderInfoDrawer = (props) => {
  const {
    visible,
    onClose,
    orderId,
    task,
  } = props;

  const tabItems = [
    {
      title: '订单信息',
      content: (<OrderInfo orderId={orderId} task={task} />),
    },
    {
      title: '订单历史变更记录',
      content: (<OrderLogs orderId={orderId} />),
    },
    {
      title: '分账记录',
      content: (<></>),
    },
  ];

  return (
    <Drawer
      visible={visible}
      title={t`订单${orderId}详情`}
      onClose={onClose}
      closeMode={['esc', 'mask', 'close']}
      style={{ maxWidth: '90%' }}
      width="90%"
    >
      <Tab>
        {tabItems.map((item, idx) => (
          <Tab.Item
            title={t`${item.title}`}
            key={`${idx}-${item.title}`}
          >
            {item.content}
          </Tab.Item>
        ))}
      </Tab>
    </Drawer>
  );
};

export default OrderInfoDrawer;
